<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="eleview/js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <form>
        id：<input type="text" v-model="user.id"> <br>
        username: <input type="text" v-model="user.username"> <br>
        address: <input type="text" v-model="user.address"> <br>
        <input type="button" value="新增" @click="add()">
    </form>

</div>

</body>
</html>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                //对应着表单的数据
               user:{
                   id:0,
                   username:'',
                   address:''
               }
            }
        },
        methods:{
            add(){
                //点击新增时需要执行的函数
                axios({
                    method:'post',
                    url:'http://localhost:8080/web09/addServlet',
                    data: this.user
                }).then((resp) => {
                    //处理响应的结果
                    console.log(resp.data)
                    if(resp.data == "success"){
                        alert("成功")
                    }else if(resp.data == "error"){
                        alert("失败")
                    }
                });

            }
        }
    });
</script>